<template>
    <div class="donate register login">
        <van-nav-bar :title="$t('benefit.button_three')" left-arrow @click-left="_return" ></van-nav-bar>
        <div class="donateMain">
            <div class="press">
                <p>{{$t('benefit.donateCoins')}}</p>
                <van-field v-model="coinName" right-icon="arrow-down" readonly :placeholder="$t('benefit.donateCoin')" @click-right-icon="showChoose"/>
            </div>
            <div class="press">
                <p>{{$t('benefit.donatePrices')}}</p>
                <van-field v-model="price" center type="number" :placeholder="$t('benefit.donatePrice')"></van-field>
            </div>
            <van-checkbox v-model="checked">{{$t('benefit.read')}}</van-checkbox>
            <button class="btn" @click="submit" v-if="status == 1">{{btnText}}</button>
            <button class="btn" style="background:rgba(137,137,137,1);color:#1F1F1F" v-if="status == 2">{{btnText}}</button>
            <button class="btn" style="background:rgba(137,137,137,1);color:#1F1F1F" v-if="status == 3">{{btnText}}</button>
        </div>
        <van-popup v-model="typeShow" position="bottom" :overlay="true">
            <van-picker show-toolbar :title="$t('info.coins')" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                coinName:'',
                checked:false,
                price:'',
                typeShow:false,
                columns:[],
                pwdShow:false,
                payPassword:'',
                btnText:''
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            showChoose(){
                this.typeShow = true
            },
            onCancel(){
                this.typeShow = false
            },
            onConfirm(data){
                this.coinName = data
                this.onCancel()
            },
            getData(){
                this.$api.get('index/getCoins')
                    .then(res =>{
                        this.columns = []
                        res.detail.map(i => this.columns.push(i.unit))
                    })
                switch (this.status) {
                    case 1:
                        this.btnText = this.$t('benefit.forever')
                        break;
                    case 2:
                        this.btnText = this.$t('benefit.haven')
                        break;
                    case 3:
                        this.btnText = this.$t('benefit.failed')
                        break;

                }
            },
            submit(){
                if(!this.coinName){
                    this.$toast(this.$t('benefit.donateCoin'))
                    return
                }
                if(!this.price){
                    this.$toast(this.$t('benefit.donatePrice'))
                    return
                }
                if(!this.checked){
                    this.$toast(this.$t('benefit.read'))
                    return
                }
                this.pwdShow = true
            },
            forgetPwd(){
                this.$router.push({name:'safe',params:{mine:this.$route.path}})
            },
            submitMove(){
                if(!this.payPassword){
                    this.$toast(this.$t('pay.title'))
                    return
                }
                let param = {
                    coin_name:this.coinName.toLowerCase(),
                    donate_num:this.price,
                    paypassword:this.payPassword,
                    bid:this.child
                }
                this.$api.post('welfare/myTodonate',param)
                    .then(res =>{
                        this.$toast(res.message)
                        this._return()
                    })

            }
        },
        created() {
            this.getData()
            console.log(this.status)
        },
        mounted() {

        },
        props:{
            child:{},
            status:{}
        }
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebebeb;
            border-bottom: 1px solid #ebebeb;
        }
        p{
            text-align: center;
            color: #54d8b4;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            color: #54d8b4;
            overflow visible !important
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                background:linear-gradient(180deg, #54d8b4, #26c196);
                color #fff;
                border: none;
                /*margin-left: 5%;*/
            }
        }
        .otherbox{
            width 100%
        }
    }

    .donateMain
        width 94%
        margin  0 auto
        .press
            color #D8D8D8
            font-size 16px
            &:last-child
                margin-top 15px
            .van-cell
                border-radius 5px
                margin-top 10px
                border 1px solid #ebebeb
        .van-checkbox
            margin-top 10px
        .btn
            margin-top 20px
            height 40px

</style>